<template>
  <div class="menu-contanier" :style="{ marginLeft: num1 * 10 + 'px' }">
    <div
      v-for="(item, index) in authorityList"
      class="menu-list"
      :key="index"
      :style="{ width: item.children ? '100%' : '' }"
    >
      <div v-if="item.children && item.children.length > 0" class="nemu-box">
        <div class="name1">
          <div class="name">
            <span>
              <el-checkbox
                v-model="item.checked"
                :indeterminate="item.isIndeterminate"
                @change="handleCheckItemChange(item.children, $event)"
              >
                <span class="name" :style="{ '--font': 16 - num * 2 + 'px' }">
                  {{ item.name }}</span
                >
              </el-checkbox>
            </span>
          </div>
        </div>

        <!-- <transition> -->
        <DynamicMenu
          :authorityList="item.children"
          :num="num1"
          :id="item.id"
          @selfCheck="selfCheck"
        ></DynamicMenu>
        <!-- </transition> -->
      </div>

      <div v-else class="noChildren">
        <span>
          <el-checkbox v-model="item.checked" @change="selfCheck">
            <span class="name name1" :style="{ '--font': 16 - num + 'px' }">
              {{ item.name }}</span
            >
          </el-checkbox>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
import { useStore } from "vuex";
const store = useStore();
defineOptions({
  name: "DynamicMenu", //组件命名F
});
const props = defineProps({
  authorityList: {
    type: Array,
    defautl: () => {
      return [];
    },
  },

  num: {
    type: Number,
    default: 0,
  },
  id: {
    type: Number,
    default: 0,
  },
});
let id = ref(props.id);

let num1 = ref(props.num);
num1.value++;

function recursionCheck(arr, flag) {
  arr.forEach((v) => {
    if (v.children && v.children.length > 0) {
      recursionCheck(v.children, flag);
    }
    v.checked = flag;
  });
}
function finditemByPid(arr, pid, flag) {
  arr.forEach((v) => {
    if (v.id == pid) {
      v.checked = flag;
      v.isIndeterminate = flag;
    } else if (v.children && v.children.length > 0) {
      finditemByPid(v.children, pid, flag);
    }
  });
}
const handleCheckItemChange = (arr, e) => {
  recursionCheck(arr, e);
  selfCheck();
};

let emigFun = defineEmits(["selfCheck", "selfCheck1"]);
const selfCheck = (item) => {
  emigFun("selfCheck");
};

onMounted(() => {});
</script>
<style scoped lang="scss">
.menu-contanier {
  width: 100%;
  height: 100%;

  .menu-list {
    .nemu-box {
      width: 100%;
      .name1 {
        width: 100%;
      }

      .menu-contanier {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
      }
    }
  }
  .noChildren {
    font-size: 14px;
    margin-right: 10px;
  }
  .name {
    font-size: var(--font);
    font-weight: bold;
    color: #fff;
  }
  .name1 {
    font-weight: normal;
  }
}
</style>
